<template>
  <div>
    <div class="main-body-pos" v-show="newFlag">
      <el-form ref="form" :model="form" :inline="true" class="form-body" >
        <!--区域名称-->
        <el-form-item label="区域名称">
          <el-input v-model="areaName" size="small" placeholder="请输入"></el-input>
        </el-form-item>
        <!--人员名称-->
        <el-form-item label="人员名称">
          <el-input v-model="personName" size="small" placeholder="请输入"></el-input>
        </el-form-item>
        <!--区域类型-->
        <el-form-item label="区域类型">
          <!--下拉框-->
          <el-select v-model="AreaType" placeholder="" size="small" style="width: 188px;">
            <el-option label="行政区域" value="1"></el-option>
            <el-option label="自定义围栏" value="2"></el-option>
          </el-select>
        </el-form-item>
        <!--最右边操作-->
        <el-form-item style="float: right">
          <el-button type="primary" @click="searchMethod" size="small" icon="el-icon-search">查询</el-button>
          <el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
          <el-button type="primary" @click="newArea" size="small" icon="el-icon-plus">新增</el-button>
        </el-form-item>
      </el-form>
      <!--表单内容-->
      <div class="table-body" ref="tableRef">
        <el-table
          :data="caseList"
          style="width: 100%;overflow: auto;padding: 0;"
          :max-height="tableHe-80"
          :row-style="{height:'40px'}"
          :cell-style="{padding:'0px'}"
          :header-row-style="tableHeaderColor"
          :header-cell-style="{padding: '0px',background:'E1F1FF'}">
          <!--暂无数据-->
          <div slot="empty" class="empty">
            <span>暂无数据</span>
          </div>
          <!--表头-->
          <af-table-column
            v-for="(item,index) in labelList"
            :key="index"
            :render-header="labelHead"
            show-overflow-tooltip
            :label="item.label"
            :prop="item.prop">
          </af-table-column>
          <!--操作-->
          <el-table-column
            label="操作"
            width="250"
            align="center"
            v-if="labelList.length>0">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="relatedRow(scope.row)">关联人员</el-button>
              <el-button type="text" size="small" @click="editorRow(scope.row)">区域修改</el-button>
              <el-button type="text" size="small" @click="deleteRow(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 24px;position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);">
          <el-pagination
            @size-change="sizeClick"
            @current-change="pageClick"
            :current-page="pageNum"
            :page-sizes="[10,20,30,40,50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
          </el-pagination>
        </div>
      </div>
    </div>
    <AreaAdd v-show="newAreaFlag"
             :newAreaFlag="newAreaFlag"
             @emClosePop="emClosePop"></AreaAdd>
    <!--    <PositionUpdatePlan v-show="updatePlan"-->
    <!--                        :updatePlan="updatePlan"-->
    <!--                        :planInfo="updatePlanObject"-->
    <!--                        @emClosePop="emClosePop"></PositionUpdatePlan>-->
    <!--    <PositionUpdatePer v-show="updatePerson"-->
    <!--                       :updatePerson="updatePerson"-->
    <!--                       :updatePersonPlanId="updatePersonPlanId"-->
    <!--                       @emClosePop="emClosePop"></PositionUpdatePer>-->
  </div>

</template>

<script>
  import AreaAdd from 'components/configServers/AreaAlarm/AreaAdd';
  import PositionUpdatePlan from 'components/configServers/PositioningSet/PositionUpdatePlan';
  import PositionUpdatePer from 'components/configServers/PositioningSet/PositionUpdatePer.vue';
  import {dateFormat,chgStrToDate} from '@/base/utils.js'

  export default {
    components: {AreaAdd},
    data() {
      return {
        form: '',//表格
        labelList: [
          {
            prop: 'areaName',
            label: '区域名称'
          },
          {
            prop: 'areaType',
            label: '区域类型'
          },
          {
            prop: 'areaRemarks',
            label: '区域备注'
          },
          {
            prop: 'personNum',
            label: '关联人员数'
          },
          {
            prop: 'modifyDate',
            label: '最新操作时间'
          },
          {
            prop: 'modifyOperatorName',
            label: '操作人'
          },
          {
            prop: 'status',
            label: '状态'
          }
        ],//表格标题
        areaName: '',//区域名称
        personName: '',//人员名称
        AreaType: '',//区域类型

        caseList: [],//案例列表
        pageNum:'1',
        pageSize: '10',
        totalCount:50,
        tableHe:1000,//表单高度
        newFlag:true,
        newAreaFlag:false,

        relatedPerson:false,//关联人员
        relatedPersonId:'',//关联人员Id
        updateArea:false,//区域修改
        updateAreaObject:{},//区域修改信息

      }
    },
    computed: {},
    methods: {
      labelHead(h, {column, index}) {
        let l = column.label.length;
        let f = 15; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
        column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
        //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
        return h('div', {class: 'table-head', style: {width: '100%'}}, [column.label]);
      },
      tableHeaderColor({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'color: #4389D6;height: 40px;'
        }
      },
      //查询
      searchMethod() {
        this.selectAreaList();
      },
      //重置
      reset() {
        this.pageNum = '1';
        this.pageSize = '10';
        this.areaName = '';
        this.selectAreaList();
      },
      //新增
      newArea() {
        this.newAreaFlag = true;
        this.newFlag = false;
      },
      //关联人员
      relatedRow(item){
        this.relatedPerson =true;
        this.relatedPersonId = item;
      },
      //区域修改
      editorRow(item){
        this.updateArea = true;
        this.updateAreaObject = item;
      },
      //删除
      deleteRow(item){
        // let param = {
        //   areaId:item.areaId,
        //   state:'0'
        // }
        // this.$http.post()
      },
      //页面跳换
      pageClick(val){
        this.pageNum = val;
        // this.selectAreaList();
      },
      sizeClick(val){
        this.pageSize = val;
        // this.selectAreaList();
      },
      //
      emClosePop(){
        this.newAreaFlag = false;
        this.updateArea = false;
        this.relatedPerson = false;
        this.selectAreaList();
      },
      //调接口
      selectAreaList(){
        let param = {

        }
        this.$http.post().then(res => {

        })
      }
    },
    mounted() {
      let obj = this.$refs.tableRef;
      this.tableHe = parseInt(window.getComputedStyle(obj).height);
      // this.selectPlanList();
    }
  }
</script>

<style scoped lang="less">
  .main-body-pos{
    width: 1200px;
    height: 100%;
  }
  .table-body{
    margin-top: 67px;
    background: #fff;
    padding: 16px;
    position: absolute;
    width: 1200px;
    top:0;
    bottom: 0;
    box-sizing: border-box;
    border-bottom-right-radius: 15px;
  }
  .form-body{
    padding: 10px 20px;
    background: #FBFBFB;
    height: 40px;
    border-bottom: 1px solid #e1e1e1;
    border-top-right-radius: 15px;
  }
</style>
<style lang="less">
  .main-body-pos{
    .el-button--text{
      padding: 5px 0;
    }
  }
</style>
